<template>
  <div class="min-h-screen h-dvh flex items-center justify-center bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 p-6">
    <div class="w-full max-w-md">
      <!-- Logo和标题 -->
      <div class="text-center mb-8">
        <div class="w-20 h-20 bg-gradient-to-br from-blue-500 via-purple-600 to-pink-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-xl">
          <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
            <path fill-rule="evenodd" d="M12 2a10 10 0 100 20 10 10 0 000-20zM8.5 9a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6.5 8.5a6 6 0 01-4-1.5 1 1 0 111.33-1.5A4 4 0 0016 16.5v1a1 1 0 01-1 1h-6a1 1 0 01-1-1v-1a4 4 0 004-2.5 1 1 0 111.33 1.5A6 6 0 0112 17.5h3z" clip-rule="evenodd"/>
          </svg>
        </div>
        <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-2">充电运营商平台</h1>
        <p class="text-gray-600 text-sm">专业充电站运营管理解决方案</p>
      </div>

      <!-- 登录表单 -->
      <div class="bg-gradient-to-r from-white/95 to-white/90 backdrop-blur-xl rounded-2xl shadow-lg border border-gray-200/50 p-8">
        <form @submit.prevent="handleLogin" class="space-y-6">
          <!-- 用户名 -->
          <div class="group">
            <label for="username" class="block text-sm font-semibold text-gray-700 mb-3">用户名</label>
            <div class="relative">
              <input
                id="username"
                v-model="form.username"
                type="text"
                required
                class="w-full px-4 py-3 bg-white/80 border border-gray-200/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-400 transition-all duration-300 placeholder:text-gray-400 relative z-10"
                placeholder="请输入用户名"
              />
              <div class="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 rounded-xl opacity-0 group-focus-within:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
            </div>
          </div>

          <!-- 密码 -->
          <div class="group">
            <label for="password" class="block text-sm font-semibold text-gray-700 mb-3">密码</label>
            <div class="relative">
              <input
                id="password"
                v-model="form.password"
                type="password"
                required
                class="w-full px-4 py-3 bg-white/80 border border-gray-200/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-400 transition-all duration-300 placeholder:text-gray-400 relative z-10"
                placeholder="请输入密码"
              />
              <div class="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 rounded-xl opacity-0 group-focus-within:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
            </div>
          </div>

          <!-- 登录按钮 -->
          <button
            type="submit"
            :disabled="loading"
            class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-6 rounded-xl hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform hover:scale-105 font-semibold shadow-lg"
          >
            <span v-if="loading" class="flex items-center justify-center space-x-2">
              <svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v4m0 12v4m8-10h-4M6 12H2"/>
              </svg>
              <span>登录中...</span>
            </span>
            <span v-else>登录系统</span>
          </button>
        </form>

        <!-- 错误信息 -->
        <div v-if="error" class="mt-6 p-4 bg-gradient-to-r from-red-50 to-red-100 border border-red-200/50 rounded-xl backdrop-blur-sm">
          <div class="flex items-center space-x-3">
            <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
              <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z" clip-rule="evenodd"/>
              </svg>
            </div>
            <p class="text-red-600 text-sm font-medium">{{ error }}</p>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="text-center mt-8">
        <p class="text-gray-500 text-xs">© 2024 充电运营商管理平台 - 提供专业充电站运营解决方案</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '../api/auth.js'

const router = useRouter()
const loading = ref(false)
const error = ref('')

const form = ref({
  username: '',
  password: ''
})

const handleLogin = async () => {
  loading.value = true
  error.value = ''

  try {
    // 模拟登录逻辑 - 实际项目中应该调用真实的API
    const result = await login(form.value.username, form.value.password)
    
    if (result.success) {
      console.log('登录成功，跳转到首页')
      router.push('/home')
    } else {
      error.value = result.message || '登录失败，请检查用户名和密码'
    }
  } catch (err) {
    console.error('登录异常:', err)
    error.value = '网络错误，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>